<!--
 * @Author: Administrator 843338961@qq.com
 * @Date: 2022-07-02 14:29:49
 * @LastEditors: lihy1_wb lihaoyong@sinosoft.com.cn
 * @LastEditTime: 2022-07-04 09:18:39
 * @FilePath: \mall\src\components\content\carts\cartItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="cartItem">
      <div class="itemCheck">
          <check-box @click.native="changeChecked" :isChecked='item.isChecked'></check-box>
      </div>
      <div class="itemImg">
          <img :src="item.img" alt="">
      </div>
      <div class="itemInfo">
          <div class="itemTitle">{{item.title}}</div>
          <div class="itemDesc">{{item.desc}}</div>
          <div class="itemBottom">
              <div class="itemPrice">￥{{item.price}}</div>
              <!-- <div class="itemCount">×{{item.count}}</div> -->
              <div class="itemCount">
                 <button class="minus" @click="minus(item)">-</button>
                 <div class="count">×{{item.count}}</div>
                 <button class="plus" @click="plus(item)">+</button>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import checkBox from "components/content/checkBox/CheckBox.vue"

export default {
    name:'cartItem',
    components: { checkBox },
    props:{
        item:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    data(){
        return{
        }
    },
    methods:{
        changeChecked(){
            this.item.isChecked=!this.item.isChecked
        },
        minus(item){
            if(item.count>1){
                this.item.count = this.item.count-1
            }else{
                this.$toast.show('最少购买一件哦!')
            }
        },
        plus(item){
            this.item.count = this.item.count+1
        }
    }
}
</script>

<style>
.cartItem{
    display: flex;
    border-bottom: 5px solid #eee;
    padding: 5px 0px;
}
.itemCheck{
    width: 20px;   
    display: flex;
    justify-content: center;
    align-items: center;
}
.itemImg img{
    width: 80px;
    height: 100px;
    border-radius: 5px;
}
.itemInfo{
    flex: 1;
    padding: 5px 10px;
}
.itemTitle,.itemDesc{  
  width: 200px;
  overflow: hidden;/*溢出隐藏*/
  white-space: nowrap;/*强制不换行*/
  text-overflow: ellipsis;/*文字隐藏方式：以省略号的方式隐藏*/
  margin-bottom: 12px;
}
.itemInfo .itemTitle{
    font-size: 17px;
    color: #333;
}
.itemInfo .itemDesc{
    font-size: 13px;
}
.itemBottom{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.itemBottom .itemPrice{
    color: orangered;
}
/* 新增样式*/
.itemCount{
    display: flex;
    flex-direction: row;
}
.itemCount .minus{
    display: flex;
    justify-content: center;
    width: 30px;
    display: flex;
}
.itemCount .plus{
    display: flex;
    justify-content: center;
    width: 30px;
    display: flex;
}
.itemCount .count{
    display: flex;
    justify-content: center;
    margin: 0 5px;
    width: 30px;
    display: flex;
}
</style>